﻿/**
 * Created by Administrator on 2018/10/25.
 */
var colorSelect = {
  defaultPrompt: '<div style="text-align: center; margin-top: 10px;" class="no-color-default">暂无渲染颜色样式</div>',
  init: function () {
    var _this = this;
    /*初始化所有图例选中*/
    $.ajax({
      //前台查询所有xml
       url: Global.mdrms_web_url+"/mdrms/queryAllXml",
//      url: 'http://127.0.0.1:8080/assets/testData/colorlist.json',
      // type: 'post',
//      type: 'get',
      dataType: 'json',
      success: function (res) {

        // if ( !res.data || res.data.length === 0 ) return;

        var wrapper = $('#colorTreeWrapper');

        if ( !res.lists.length ) {
          wrapper.html('<li>暂无默认方案文件</li>');
          $('.select-color .color-item-wrapper').html(_this.defaultPrompt);
          return;
        }

        var fl = [];
        var nodes = res.lists.filter(function (val) {
          var name = val.path.split('/')[2];
          return fl.indexOf(name) === -1 && fl.push(name);
        }).map(function (val) {
          var name = val.path.split('/')[2];
          var c = res.lists.filter(function (item) { return item.path.split('/')[2] === name; })
            .map(function (cur) { return {name: cur.name, father: name}; });
          return {name: name, children: c};
        });
    $('#colorTreeWrapper').html('');

        /*渲染颜色树*/
        layui.tree({
          elem: '#colorTreeWrapper', //传入元素选择器
          nodes: nodes,
          /*选择要素加载颜色*/
          click: function (node, e) {
            if ( node.children ) return;
            _this.requestData(node.father + '/' + node.name);

            /*改变颜色，这里的e是修改了插件传入的*/
            $(e.currentTarget).parents('.layui-tree').find('a').attr('style', '');
            $(e.currentTarget).css('color', 'red');
          }
        });


        /*初始加载 默认匹配*/
        /*要匹配的文件名字 值*/
        var match =$('#nameSelect').val();
        /*遍历，没考虑重名*/
        var current = [].slice.call(wrapper.find('cite')).filter(function(val){return $(val).text() === match})[0];
         $(current).parents('ul:eq(0)').siblings('i').trigger('click');
          $(current).parent().trigger('click');



      },
      error: function (e) {
        console.log(e);
        $('#colorTreeWrapper').html('<li>暂无默认方案文件</li>');
        $('.select-color .color-item-wrapper').html(_this.defaultPrompt);
      }
    });

    
    /*添加颜色*/
    $('.select-color .add-color').click(function () {
      var color = '<div class="element">' +
        '<input class="item layui-input" type="color" value="#000000">' +
        '<input class="item layui-input" type="number" value="0">' +
        '<input class="item layui-input" type="text" value="0">' +
        '<button class="del-color layui-btn layui-btn-danger layui-btn-sm">删除</button>' +
      '</div>';
      $('.select-color .color-item-wrapper').append(color);
      /*移除无数据提示*/
      $('.select-color .no-color-default').remove();
    });

    /*删除颜色*/
    $('.select-color .element-wrapper').click(function (e) {
      if ( !$(e.target).hasClass('del-color') ) return;
      $(e.target).parent().remove();

      /*全部删除添加无数据提示*/
      if ( !$(this).find('.element').length ){
        $('.select-color .color-item-wrapper').html(_this.defaultPrompt);
      }
    });
  },
  //颜色方案选取回调 add by heyao
  requestDataWithCallback: function (name,callback) {
    var _this = this;
    $.ajax({
      url: 'xml/color/'+ name +'.xml',
      type: 'get',
      dataType: 'xml',
      success: function (res) {
        var valString = '';
 Global.colorUnit= $(res).find('unit').attr('value');
        Global.legendColor = [];
        $(res).find('element').each(function () {
          valString += '<div class="element">' +
            '<input class="item layui-input" type="color" value="'+ $(this).attr('color') +'">' +
            '<input class="item layui-input" type="number" value="'+ $(this).attr('value') +'">' +
            '<input class="item layui-input" type="text" value="'+ $(this).attr('caption') +'">' +
            '<button class="del-color layui-btn layui-btn-danger layui-btn-sm">删除</button>' +
          '</div>';
          /*添加到全局*/
          Global.legendColor.push({
            value: $(this).attr('value'),
            color: $(this).attr('color'),
            caption: $(this).attr('caption')
          });
        });

        $('.select-color .color-item-wrapper').html(valString);
        if(callback) callback.call(_this,Global.legendColor);
        
      },
      error: function (e) {
        console.log(e);
        $('.select-color .color-item-wrapper').html(_this.defaultPrompt);
      }
    });
  },

  /*请求本地配置xml*/
  requestData: function (name) {
    var _this = this;
    $.ajax({
      url: 'xml/color/'+ name +'.xml',
      type: 'get',
      dataType: 'xml',
      success: function (res) {
        var valString = '';
        Global.legendColor = [];
        $(res).find('element').each(function () {
          valString += '<div class="element">' +
            '<input class="item layui-input" type="color" value="'+ $(this).attr('color') +'">' +
            '<input class="item layui-input" type="number" value="'+ $(this).attr('value') +'">' +
            '<input class="item layui-input" type="text" value="'+ $(this).attr('caption') +'">' +
            '<button class="del-color layui-btn layui-btn-danger layui-btn-sm">删除</button>' +
          '</div>';
          /*添加到全局*/
          Global.legendColor.push({
            value: $(this).attr('value'),
            color: $(this).attr('color'),
            caption: $(this).attr('caption')
          });
        });

        $('.select-color .color-item-wrapper').html(valString);
      },
      error: function (e) {
        console.log(e);
        $('.select-color .color-item-wrapper').html(_this.defaultPrompt);
      }
    });
  },
  openLayer: function () {
    var _this = this;

    /*每次打开重新请求数据渲染dom*/
    // _this.requestData($('#legendSelect').val());

    layLayer.open({
      type: 1,
      title: '图例颜色选择',
      area: ['650px', '550px'],
      btn: '确定',
      content: $('#selectColor'),
      yes: function (ind) {
        // var loadMask = layLayer.load(0, {shade: [0.3, '#000']});
        // var postData = {
        //   fileName: $('#legendSelect').val(),
        //   element:[]
        // };
        var element = [];
        var changeColor = '';
        $('#selectColor').find('.color-item-wrapper').children('.element').each(function () {
          var val = $(this).children('input[type="number"]').val(),
              caption = $(this).children('input[type="text"]').val(),
              color = $(this).children('input[type="color"]').val();
          element.push( { value: val, color: color, caption: caption } );
          changeColor += '<span class="plan-item" style="background-color: '+ color +';"></span>';
        });

        /*修改后改变全局并且更新渲染方案里的*/
        Global.legendColor = element;
        $('#gisGraphics').find('.render-plan').html(changeColor);

/*        $.ajax({
          type: "post",
          // url: Global.mdrms_web_url+"/mdrms/modifyColorXml",
          url: "http://127.0.0.1:9080/MDRMSWeb/mdrms/modifyColorXml",
          dataType: "json",
          data: {json: JSON.stringify(postData)},
          // data: {json:JSON.stringify({"fileName":"单日气温.xml","element":[{"color":"#111111111111111","value":"1213131231231231235","caption":"12321313135℃"},{"color":"#ffff00","value":"10","caption":"10℃"},{"color":"#ff00ff","value":"15","caption":"15℃"},{"color":"#00ff00","value":"15","caption":"15℃"}]})},
          success: function(data){
            layLayer.close(loadMask);
            if ( !data.flag ){
              layLayer.msg('修改失败', {type:0, icon: 5, time: 1500});
              return;
            }
            /!*修改后改变全局并且更新渲染方案里的*!/
            Global.legendColor = postData.element;
            $('#gisGraphics').find('.render-plan').html(changeColor);
          },
          error: function (e) {
            console.log(e);
            layLayer.close(loadMask);
          }
        });*/


        layLayer.close(ind);
      }
    });
  }
};